[Ionic x Vue] タブによる画面遷移を構築する

IonicとVueを組み合わせたWebアプリを作りましょう。タブを使った画面遷移を作ってみました。

#Ionic

#Vue.js

諏訪悠紀

2019.07.02

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

Ionicはクロスプラットフォームのモバイルアプリ向けフレームワークです。主にiOS/Android向けに、ワンソースコードでモバイルアプリを開発することができます。

今回はタブの使い方を解説します。

事前準備

こちらのブログを通して作成したプロジェクトをベースに進めます。

タブとは

タブは画面下部に表示することが多い、機能を切り替える形で画面を遷移させるコンポーネントです。画面上部に表示することもできます。

ion-tabs - Ionic Framework 日本語ドキュメンテーション

タブのポイントは、単純な表示コンポーネントというだけではなく画面遷移を管理する機能も持っています。

次のように表示されます。

タブの基本構成

まずは基本的な構成を見ていきます。シンプルな構成としては以下のようになります。

<ion-tabs>
  <ion-tab tab="a">
  </ion-tab>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="a">
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

まず ion-tabs で ion-tab と ion-tab-bar を囲います。

ion-tab はタブ内に含める各画面要素です。タブ内に収める画面要素はこの中に入れる必要があります。

ion-tab-bar は実際に画面下部に配置するコンポーネントです。中にある ion-tab-button がタブバーに表示されるアイコンのボタンになります。

ion-tab と ion-tab-bar には tab 属性で同じ値を設定することで、タブが選択されたときにルーティングと現在選択されているタブがリンクします。

タブを実装する

App.vue に ion-tabs を配置します。

<template>
  <div id="app">
    <ion-app>
      <ion-tabs>
        <ion-tab tab="music">
          <ion-header translucent>
            <ion-toolbar>
              <ion-title>Music</ion-title>
            </ion-toolbar>
          </ion-header>
          <ion-content fullscreen class="ion-padding">
            <h1>Music</h1>
          </ion-content>
        </ion-tab>
        <ion-tab tab="movies">
          <ion-header translucent>
            <ion-toolbar>
              <ion-title>Movies</ion-title>
            </ion-toolbar>
          </ion-header>
          <ion-content fullscreen class="ion-padding">
            <h1>Movies</h1>
          </ion-content>
        </ion-tab>
        <ion-tab tab="games">
          <ion-header translucent>
            <ion-toolbar>
              <ion-title>Games</ion-title>
            </ion-toolbar>
          </ion-header>
          <ion-content fullscreen class="ion-padding">
            <h1>Games</h1>
          </ion-content>
        </ion-tab>
        <ion-tab-bar slot="bottom">
          <ion-tab-button tab="music">
            <ion-label>Music</ion-label>
            <ion-icon name="musical-note"></ion-icon>
          </ion-tab-button>
          <ion-tab-button tab="movies">
            <ion-label>Movies</ion-label>
            <ion-icon name="videocam"></ion-icon>
          </ion-tab-button>
          <ion-tab-button tab="games">
            <ion-label>Games</ion-label>
            <ion-icon name="logo-game-controller-b"></ion-icon>
          </ion-tab-button>
        </ion-tab-bar>
      </ion-tabs>
    </ion-app>
  </div>
</template>

タブ表示だけ見るとかなりシンプルで、これだけでロジックの制御なく画面切り替えが実現できます。